﻿@page "/linear-gauge/ranges"

@using Syncfusion.Blazor.LinearGauge
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates how to highlight a region in an axis by using ranges in gauge. The properties of the range can be changed by using the options provided in the property panel.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render and configure the ranges in linear gauge. You can use <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.LinearGauge.LinearGaugeRange~Start.html'>Start</a></code>,
      <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.LinearGauge.LinearGaugeRange~End.html'>End</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.LinearGauge.LinearGaugeRange~StartWidth.html'>StartWidth</a></code>, <code><a target='_blank' class='code' 
      href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.LinearGauge.LinearGaugeRange~EndWidth.html'>EndWidth</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.LinearGauge.LinearGaugeRange~Position.html'>Position</a></code> properties of <code><a target='_blank' class='code' 
      href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.LinearGauge.LinearGaugeRange_properties.html'>LinearGaugeRange</a></code> to customize the ranges. You can also specify various colors for the ranges in the axis. If you enable the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.LinearGauge.LinearGaugeAxisLabelStyle~UseRangeColor.html'>
      UseRangeColor</a></code> property, then the axis labels will be displayed based on its range color.</p>
    <p>More information about Ranges can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/linear-gauge/ranges'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfLinearGauge Orientation="Orientation.Horizontal">
        <LinearGaugeAxes>
            <LinearGaugeAxis Minimum="0" Maximum="100">
                <LinearGaugeLine Width="0"/>
                <LinearGaugeAxisLabelStyle Offset="30" Format="{value}%" UseRangeColor="@EnableRangeColor"/>
                <LinearGaugeMajorTicks Interval="10" Height="0"/>
                <LinearGaugeMinorTicks Height="0"/>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="35" Height="10" Width="10" Placement="Syncfusion.Blazor.LinearGauge.Placement.Near" Offset="-40" MarkerType="MarkerType.Triangle"/>
                </LinearGaugePointers>
                <LinearGaugeRanges>
                    <LinearGaugeRange Start="@FirstRangeStart" End="@FirstRangeEnd" Color="@FirstRangeColor" StartWidth="@FirstRangeStartWidth" EndWidth="@FirstRangeEndWidth"/>
                    <LinearGaugeRange Start="@SecondRangeStart" End="@SecondRangeEnd" Color="@SecondRangeColor" StartWidth="@SecondRangeStartWidth" EndWidth="@SecondRangeEndWidth"/>
                    <LinearGaugeRange Start="@ThirdRangeStart" End="@ThirdRangeEnd" Color="@ThirdRangeColor" StartWidth="@ThirdRangeStartWidth" EndWidth="@ThirdRangeEndWidth"/>
                </LinearGaugeRanges>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
        <LinearGaugeAnnotations>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="35" Y="-50" ZIndex="1">
                <ContentTemplate>
                    <div style="width:40px"><h1 style="font-size:18px; margin-top: -5px; margin-left: -10px">@AnnotationText</h1></div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
        </LinearGaugeAnnotations>
    </SfLinearGauge>
</div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tr>
                    <td>
                        <div class="propertyValue"> Select Range</div>
                    </td>
                    <td>
                        <div class="propertyValue">
                            <SfDropDownList TItem="RangeData" TValue="string" DataSource="@RangDataList" @bind-Value="@RangeValue">
                                <DropDownListEvents TItem="RangeData" TValue="string" ValueChange="RangeChange"/>
                                <DropDownListFieldSettings text="Name" value="Name"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="propertyValue">Range Color</div>
                    </td>
                    <td>
                        <div class="e-float-input" style="margin-top: 0px; padding-left: 10px; padding-top: 10px;">
                            <SfTextBox Value="@RangeColorValue" ValueChange="@RangeColorValueChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="propertyValue">Range Font Color</div>
                    </td>
                    <td>
                        <div class="propertyValue">
                            <SfDropDownList TValue="string" TItem="FontColorData" DataSource="@FontColorTypeList" @bind-Value="@FontColorValue">
                                <DropDownListEvents TValue="string" TItem="FontColorData" ValueChange="RangeFontColorChange"/>
                                <DropDownListFieldSettings text="Name" value="Value"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="propertyValue">
                            Range Start
                            <span class="value">@RangeStartText</span>
                        </div>
                    </td>
                    <td>
                        <div class="propertyValue">
                            <input type="range" value="@RangeStartValue" min="0" max="100" @onchange="RangeStartChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="propertyValue">
                            Range End
                            <span class="value">@RangeEndText</span>
                        </div>
                    </td>
                    <td>
                        <div class="propertyValue">
                            <input type="range" value="@RangeEndValue" min="0" max="100" @onchange="RangeEndChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="propertyValue">
                            Range Start Width
                            <span class="value">@RangeStartWidthText</span>
                        </div>
                    </td>
                    <td>
                        <div class="propertyValue">
                            <input type="range" value="@RangeStartWidth" min="0" max="30" @onchange="RangeStartWidthChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="propertyValue">
                            Range End Width
                            <span class="value">@RangeEndWidthText</span>
                        </div>
                    </td>
                    <td>
                        <div class="propertyValue">
                            <input type="range" value="@RangeEndWidth" min="0" max="30" @onchange="RangeEndWidthChange"/>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<style>
    .value {
        margin-left: 10px;
    }
    tr {
        height: 40px;
    }
    td {
        width:50%
    }
    .propertyValue {
        padding-left: 10px;
        padding-top: 10px;
    }
</style>
@code {
    private double FirstRangeStart = 0.1;
    private double FirstRangeEnd = 32;
    private double FirstRangeStartWidth = 15;
    private double FirstRangeEndWidth = 15;
    private string FirstRangeColor = "#30B32D";
    private double SecondRangeStart = 32;
    private double SecondRangeEnd = 68;
    private double SecondRangeStartWidth = 15;
    private double SecondRangeEndWidth = 15;
    private string SecondRangeColor = "#FFDF00";
    private double ThirdRangeStart = 68;
    private double ThirdRangeEnd = 100;
    private double ThirdRangeStartWidth = 15;
    private double ThirdRangeEndWidth = 15;
    private string ThirdRangeColor = "#F03E3E";
    private bool EnableRangeColor = false;
    private string RangeValue = "Low";
    private string FontColorValue = "default";
    private double RangeStartValue = 0;
    private double RangeEndValue = 32;
    private double RangeStartWidth = 15;
    private double RangeEndWidth = 15;
    private string RangeColorValue = "#F03E3E";
    private double RangeStartText = 0;
    private double RangeEndText = 32;
    private double RangeStartWidthText = 15;
    private double RangeEndWidthText = 15;
    public string AnnotationText = (35).ToString();
    public class RangeData {
        public string Name { get; set; }
    }
    private List<RangeData> RangDataList = new List<RangeData> {
        new RangeData{ Name= "Low"},
        new RangeData{ Name= "Moderate"},
        new RangeData{ Name= "High"},
    };
    public class FontColorData {
        public string Name { get; set; }
        public string Value { get; set; }
    }
    private List<FontColorData> FontColorTypeList = new List<FontColorData> {
        new FontColorData{ Value= "default", Name= "Default Color"},
        new FontColorData{ Value= "range", Name= "Range Color"},
    };
    private void RangeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, RangeData> args) {
        RangeValue = (args.Value).ToString();
        if (RangeValue == "Low") {
            RangeColorValue = FirstRangeColor;
            RangeStartValue = RangeStartText = FirstRangeStart;
            RangeEndValue = RangeEndText = FirstRangeEnd;
            RangeStartWidth = RangeStartWidthText = FirstRangeStartWidth;
            RangeEndWidth = RangeEndWidthText = FirstRangeEndWidth;
        }
        else if (RangeValue == "Moderate") {
            RangeColorValue = SecondRangeColor;
            RangeStartValue = RangeStartText = SecondRangeStart;
            RangeEndValue = RangeEndText = SecondRangeEnd;
            RangeStartWidth = RangeStartWidthText = SecondRangeStartWidth;
            RangeEndWidth = RangeEndWidthText = SecondRangeEndWidth;
        }
        else {
            RangeColorValue = ThirdRangeColor;
            RangeStartValue = RangeStartText = ThirdRangeStart;
            RangeEndValue = RangeEndText = ThirdRangeEnd;
            RangeStartWidth = RangeStartWidthText = ThirdRangeStartWidth;
            RangeEndWidth = RangeEndWidthText = ThirdRangeEndWidth;
        }
    }
    private void RangeColorValueChange(Syncfusion.Blazor.Inputs.ChangedEventArgs args) {
        RangeColorValue = (args.Value).ToString();
        if (RangeValue == "Low") { FirstRangeColor = RangeColorValue; }
        else if (RangeValue == "Moderate") { SecondRangeColor = RangeColorValue; }
        else { ThirdRangeColor = RangeColorValue; }
    }
    private void RangeFontColorChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FontColorData> args) {
        FontColorValue = (args.Value).ToString();
        if (FontColorValue == "default") { EnableRangeColor = false; }
        else { EnableRangeColor = true; }
    }
    private void RangeStartChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeStartValue = RangeStartText = Convert.ToDouble(args.Value);
        if (RangeValue == "Low") { FirstRangeStart = RangeStartValue; }
        else if (RangeValue == "Moderate") { SecondRangeStart = RangeStartValue; }
        else { ThirdRangeStart = RangeStartValue; }
    }
    private void RangeEndChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeEndValue = RangeEndText = Convert.ToDouble(args.Value);
        if (RangeValue == "Low") { FirstRangeEnd = RangeEndValue; }
        else if (RangeValue == "Moderate") { SecondRangeEnd = RangeEndValue; }
        else { ThirdRangeEnd = RangeEndValue; }
    }
    private void RangeStartWidthChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeStartWidth = RangeStartWidthText = Convert.ToDouble(args.Value);
        if (RangeValue == "Low") { FirstRangeStartWidth = RangeStartWidth; }
        else if (RangeValue == "Moderate") { SecondRangeStartWidth = RangeStartWidth; }
        else { ThirdRangeStartWidth = RangeStartWidth; }
    }
    private void RangeEndWidthChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeEndWidth = RangeEndWidthText = Convert.ToDouble(args.Value);
        if (RangeValue == "Low") { FirstRangeEndWidth = RangeEndWidth; }
        else if (RangeValue == "Moderate") { SecondRangeEndWidth = RangeEndWidth; }
        else { ThirdRangeEndWidth = RangeEndWidth; }
    }
}